<!--党员管理-->
<template>
  <div class="page-div">
    <!--样式div-->
    <div class="lastdiv">
      <!--头部div-->
      <div class="left-title">
        <h2>{{pageTitle}}</h2>
      </div>
      <div class="title-line"></div>
      <!--下面的div-->
      <div style="display:flex;" >
        <!--左边的div-->
        <div style="flex: 1">
          <Tree @childByValue="showshow"></Tree>
        </div>
        <!--右边的div-->
        <div style="flex: 2">
          <div>
            <div>
              <el-row>
                <el-button type="primary">添加</el-button>
                <el-button type="primary" plain @click="dialogVisible=true">修改</el-button>
                <el-button type="primary">转出</el-button>
              </el-row>
            </div>
            <!--上面整个部分-->
            <div style="width: 100%;display: flex" >
              <!-- <div style="text-align: center">-->
              <div style="width: 45%;flex: 1;margin-top: 20px; margin-left: 10px" >
                {{thisjob}}
              </div>
              <div style="width: 45%;flex: 1">
                <el-input placeholder="请输入内容" v-model="input" class="input-with-select">
                  <el-button slot="append" icon="el-icon-search"></el-button>
                </el-input>
                <el-radio-group v-model="radio" style="margin-top: 10px">
                  <el-radio :label="3">姓名</el-radio>
                  <el-radio :label="6">年龄</el-radio>
                  <el-radio :label="9">入党年份</el-radio>
                </el-radio-group>
              </div>

            </div>
            <el-table :data="tableData" height="400" border style="width: 100%;margin-top: 10px">
              <el-table-column prop="date" label="姓名" ></el-table-column>
              <el-table-column prop="name" label="年龄" ></el-table-column>
              <el-table-column prop="address" label="所属组织"></el-table-column>
              <el-table-column prop="address" label="入党时间"></el-table-column>
              <el-table-column prop="address" label="积分总计"></el-table-column>
              <el-table-column prop="address" label="已兑换积分总计"></el-table-column>
            </el-table>
          </div>
          <div>

          </div>
        </div>

        <el-dialog
          title=""
          :visible.sync="dialogVisible"
          width="815px"
          :before-close="handleClose11">
          <template>
            <el-form style="padding: 5px" :inline="true" class="el-demo" ref="giftsForm" :model="giftsForm" :label-position="labelPosition">
              <!--1-->
              <tr style="width: 760px">
                <td >
                  <el-form-item label="姓名">
                    <el-input v-model="giftsForm.name" style="width: 220px">{{giftsForm.name}}</el-input>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="性别">
                    <el-input v-model="giftsForm.sin" style="width: 220px">{{giftsForm.sin}}</el-input>
                  </el-form-item>
                </td>
              </tr>
              <!--2-->
              <tr style="width: 760px">
                <td >
                  <el-form-item label="入党时间">
                    <!--<el-input v-model="giftsForm.time" style="width: 220px">{{giftsForm.time}}</el-input>-->
                    <el-date-picker  placeholder="选择日期" v-model="giftsForm.time" style="width: 220px"></el-date-picker>
                  </el-form-item>
                </td>
                <td>
                  <el-form-item label="出生日期">
                    <!--<el-input v-model="giftsForm.birthtime" style="width: 220px">{{giftsForm.birthtime}}</el-input>-->
                    <el-date-picker  placeholder="选择日期" v-model="giftsForm.birthtime" style="width: 220px"></el-date-picker>
                  </el-form-item>
                </td>
              </tr>
              <!--3-->
              <tr style="width: 760px">
                <td >
                  <el-form-item label="手机号码">
                    <el-input v-model="giftsForm.iphone" style="width: 220px">{{giftsForm.iphone}}</el-input>
                  </el-form-item>

                </td>
                <td>
                  <el-form-item style="" label="归属支部/党委">
                    <el-select style="width: 220px;" v-model="giftsForm.belong" placeholder="请选择">
                      <el-option
                        v-for="item in options3"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </el-form-item>
                </td>
              </tr>

              <tr style="width: 760px">
                <td >
                 <!-- <el-form-item label="手机号码">
                    <el-input v-model="giftsForm.iphone" style="width: 220px">{{giftsForm.iphone}}</el-input>
                  </el-form-item>-->
                  <el-form-item label="组织关系转入时间">
                    <!-- <el-input v-model="giftsForm.worktime" style="width: 220px">{{giftsForm.worktime}}</el-input>-->
                    <el-date-picker  placeholder="选择日期" v-model="giftsForm.worktime" style="width: 220px"></el-date-picker>
                  </el-form-item>
                </td>

              </tr>
            </el-form>
          </template>
          <span slot="footer" class="dialog-footer">
              <el-button @click="dialogVisible=false">取 消</el-button>
              <el-button type="primary" @click="dialogVisible=false">确定</el-button>
      </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>
<script>
  // import __ from '__' // __是需要手动引入的文件
  import Tree from '../NavBasicManagerment/tree.vue'
  export default {
    name: '',
    components: {
      Tree
    },
    data () {
      return {
        pageTitle: '党员设置',
        thisjob:'中兴社区一支部',
        radio:"3",
        dialogVisible: false,
//      修改
        dialogFromVisible: false,
        giftsForm:{
          name:'',
          sin:'',
          time:'',
          birthtime:'',
          worktime:'',
          belong:'',
          iphone:'',
        },
        options3: [{
          value: '镇党委',
          label: '镇党委'
        }, {
          value: '光辉村',
          label: '光辉村'
        }, {
          value: '中兴社区一支部',
          label: '中兴社区一支部'
        }, {
          value: '中兴社区党委',
          label: '中兴社区党委'
        }],
      }

    },
    methods: {
      showshow:function(dass,sss){
        console.log(dass);
        this.thisjob=dass;

      },
      handleClose11(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
      },
    },
    /*将书记对应的职务的树展现出来*/
    mounted(){

    }
  }
</script>
<style lang="postcss" scoped>
  .page-div{
    background-color: #fffcfa;
    width:100%;
    height:100%;
  }
  .lastdiv{
    background-color: #fffcfa;
    padding-bottom: 10px;
  }
  .input-with-select{
    background-color: #fff;
  }
  .left-title{
    text-align: left;
    padding: 10PX 20PX;
  }
  .title-line{
    height:1px;
    width: 98%;
    margin: auto 1%;
    background-color: #ddd;
  }
</style>
